<template>
  <div id="all-top">
    <!-- MV排行榜 -->
    <TopList :topList="topList" :loading="loading">
      <template #header>
        <div class="font-20 font-weight mtop-10">MV排行榜</div>
        <!-- 顶部标签筛选 -->
        <div class="tag-screening">
          <div class="update-txt">
            最近更新: 今天
            <a-tooltip placement="bottom">
              <template slot="title">
                <ul>
                  <li>选取云音乐中三个内发布的热度最高的50支MV，每天更新。</li>
                  <li>热度由MV播放、收藏、分享数量综合计算</li>
                </ul>
              </template>
              <a-icon type="question-circle" />
            </a-tooltip>
          </div>
          <checkable-tag
            :tagList="tagList"
            @checked="checked"
            :selectTag="topParams.area"
          />
        </div>
      </template>
    </TopList>
  </div>
</template>

<script>
import { topMv } from '@/api/music';
import { Tooltip } from 'ant-design-vue';
import TopList from '@/components/Content/TopList';
import CheckableTag from '@/components/Library/CheckableTag';

export default {
  name: 'allTop',

  components: {
    ATooltip: Tooltip,
    CheckableTag,
    TopList
  },

  data() {
    return {
      // 标签列表
      tagList: [
        {
          id: 7,
          name: "内地"
        },
        {
          id: 96,
          name: "港台"
        },
        {
          id: 8,
          name: "欧美"
        },
        {
          id: 16,
          name: "日本"
        },
        {
          id: 0,
          name: "韩国"
        }
      ],
      topList:[],
      // MV排行榜参数
      topParams: {
        limit: 50,
        offset: 0,
        area: '内地',
        timestamp: new Date().getTime()
      },
      loading: false
    }
  },

  watch: {
    '$route.query.area': {
      handler(value) {
        this.topParams.area = value;
        this.getTopMv();
      },
      immediate: true
    }
  },

  methods: {
    // 获取MV排行榜
    async getTopMv() {
      this.loading = true;
      const res = (await topMv(this.topParams)).data;
      this.topList = Object.freeze(res.data);
      this.loading = false;
    },
    checked(value) {
      this.topParams.area = value;
      this.getTopMv();
    }
  }
}
</script>

<style lang="less" scoped>
#all-top {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 30px;
  .tag-screening {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .update-txt {
      color: #676767;
      font-size: 12px;
    }
  }
}
</style>